웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
SEO를 위해서 사이트맵을 만들어야 하는 경우가 있습니다. 사이트맵을 만드는 방법은 매우 다양한데 직접 입력하기에는 시간과 노력이 너무 많이 들죠. 이런 경우 nuxtjs에 사용 가능한 @nuxtjs/sitemap 모듈을 사용하면 간단하게 사이트맵 생성이 가능하게 됩니다. 그럼 아래에서 자세히 알아봅니다.
사이트맵을 만들어 검색엔진에 제출하면 색인이 강화되어 유입이 늘어날 수 있습니다. 또한 검색엔진에서 자신의 웹페이지를 보다 빠르고 주기적으로 크롤링하도록 할 수 있습니다. 이 역시 방문자 증가로 이어질 수 있죠.
앞서 말한 것처럼 nuxtjs 프레임워크를 사용한다면 보다 쉽게 사이트맵 생성이 가능합니다. @nuxtjs/sitemap 모듈은 Nuxt.js 애플리케이션에 설정하여 사용하면 원하는 페이지를 매우 쉽고 빠르게 자동으로 생성해주기 때문입니다.
다음으로 설치 방법입니다. 먼저, NPM 또는 Yarn을 통해 @nuxtjs/sitemap 모듈을 설치해야 합니다.
설치 후, nuxt.config.js 파일에서 @nuxtjs/sitemap을 modules에 추가하고 설정해야 합니다.
@ nuxt.config.js
이제 사이트맵 사용을 위해서 설정이 필요합니다. nuxt.config.js 파일에 sitemap 블록을 아래와 같이 추가합니다.
위에서 사용된 옵션의 간략한 설명입니다.
위 옵션에서 가장 중요한 부분 중 하나가 동적 라우트 생성입니다. 아래에서 동적 라우트 생성 방법을 좀 더 알아봅니다.
일반적으로 @nuxtjs/sitemap의 가장 큰 장점이 바로 동적 라우트 생성이 가능하다는 점입니다. 만약 2000개의 포스트가 저장되어 있는 경우 이를 한 번에 동적으로 추가하여 만들 수도 있겠죠.
이제 모든 과정이 끝났습니다. 위에서 만든 것처럼 https://mywebsite.com/sitemap.xml로 접근할 경우 사이트맵이 나타나게 됩니다.
여기까지 nuxtjs의 사이트맵을 간단하게 만들 수 있는 방법을 알아보았습니다.
@ 사이트맵이 필요한 이유는?
사이트맵을 만들어 검색엔진에 제출하면 색인이 강화되어 유입이 늘어날 수 있습니다. 또한 검색엔진에서 자신의 웹페이지를 보다 빠르고 주기적으로 크롤링하도록 할 수 있습니다. 이 역시 방문자 증가로 이어질 수 있죠.
@nuxtjs/sitemap 사용하기
앞서 말한 것처럼 nuxtjs 프레임워크를 사용한다면 보다 쉽게 사이트맵 생성이 가능합니다. @nuxtjs/sitemap 모듈은 Nuxt.js 애플리케이션에 설정하여 사용하면 원하는 페이지를 매우 쉽고 빠르게 자동으로 생성해주기 때문입니다.
@nuxtjs/sitemap 설치하기
다음으로 설치 방법입니다. 먼저, NPM 또는 Yarn을 통해 @nuxtjs/sitemap 모듈을 설치해야 합니다.
npm install @nuxtjs/sitemap
// or
yarn add @nuxtjs/sitemap
// or
yarn add @nuxtjs/sitemap
설치 후, nuxt.config.js 파일에서 @nuxtjs/sitemap을 modules에 추가하고 설정해야 합니다.
@ nuxt.config.js
export default {
modules: [
...,
'@nuxtjs/sitemap'
],
}
modules: [
...,
'@nuxtjs/sitemap'
],
}
이제 사이트맵 사용을 위해서 설정이 필요합니다. nuxt.config.js 파일에 sitemap 블록을 아래와 같이 추가합니다.
sitemap: {
path: '/sitemap.xml',
hostname: 'https://mywebsite.com',
cacheTime: 1000 * 60 * 15,
gzip: true,
generate: false, // nuxt generate를 사용시 이 기능을 활성화
exclude: [
'/secret',
'/admin/**'
],
routes: async () => {
const routes = [] // 필요한 경우 여기에서 다른 라우트를 동적으로 가져오기, 포스트 목록 등등
return routes
}
}
path: '/sitemap.xml',
hostname: 'https://mywebsite.com',
cacheTime: 1000 * 60 * 15,
gzip: true,
generate: false, // nuxt generate를 사용시 이 기능을 활성화
exclude: [
'/secret',
'/admin/**'
],
routes: async () => {
const routes = [] // 필요한 경우 여기에서 다른 라우트를 동적으로 가져오기, 포스트 목록 등등
return routes
}
}
위에서 사용된 옵션의 간략한 설명입니다.
- path: 사이트맵이 위치할 경로명, 일반적으로 /sitemap.xml 많이 쓰임
- hostname: 애플리케이션의 주 호스트네임
- cacheTime: 사이트맵의 캐시 시간(밀리초)
- gzip: 사이트맵 압축을 활성화 여부
- generate: 프로젝트를 빌드하는 데 nuxt generate 사용시 사이트맵도 generate하기
- exclude: 사이트맵에서 제외할 라우트의 배열(색인에 불필요한 라우트)
- routes: 라우트의 배열을 반환하는 함수(동적 루트를 추가하는 데 사용 가능)
위 옵션에서 가장 중요한 부분 중 하나가 동적 라우트 생성입니다. 아래에서 동적 라우트 생성 방법을 좀 더 알아봅니다.
동적 라우트 생성하기
일반적으로 @nuxtjs/sitemap의 가장 큰 장점이 바로 동적 라우트 생성이 가능하다는 점입니다. 만약 2000개의 포스트가 저장되어 있는 경우 이를 한 번에 동적으로 추가하여 만들 수도 있겠죠.
// api에 axios 사용하여 동적 라우트의 사이트맵 만들기
routes: async () => {
const { data } = await axios.get('https://api.yourwebsite.com/posts');
return data.map(post => `/blog/${post.slug}`);
}
routes: async () => {
const { data } = await axios.get('https://api.yourwebsite.com/posts');
return data.map(post => `/blog/${post.slug}`);
}
이제 모든 과정이 끝났습니다. 위에서 만든 것처럼 https://mywebsite.com/sitemap.xml로 접근할 경우 사이트맵이 나타나게 됩니다.
여기까지 nuxtjs의 사이트맵을 간단하게 만들 수 있는 방법을 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
[NuxtJS] useRouter를 사용하여 퀴리스트링 변경하는 방법- nextjs 페이지 이동하는 방법 및 예제, router
- Python앱에서 네이버 서치 어드바이저 sitemap 등록시 에러나는 경우
Python에서 xml 사이트맵 페이지 만들기- uwsgi 멀티 라우팅 사용시 no internal routing support, rebuild with pcre support uwsgi 에러 발생
[VueJS] vue-router 사용하는 방법, 라우트 설정- AngularJS에서 route에서 controller as 사용방법
AngularJS Routing, 라우팅 관련 이벤트 알아보기- AngularJS 라우팅 설정 locationProvider.html5Mode() 역할은?